<template>
	<view class="prower">
		<commonHeader :title="$t('pp1')" headtitle toback='0'></commonHeader>
		<view class="gHeadbox"></view>
		<view class="prowerBox">
			<view class="prowerBox_top">
				<view class="bomtop">
					<image src="@/static/img/j_quan.png" mode=""></image>
					<text>{{$t('pp2')}}：</text>
				</view>
				<view class="porfzy" @click="fndynamicLeft">
					<text>{{$t('pp3')}}</text>
				</view>
				<view class="bomcenter">
					<text>{{Number(account.pledgeNum)?Number(retainFourDecimals(account.pledgeNum-account.profitTotal)):'0'}}JUMP</text>
				</view>
				<view class="langbox">
				</view>
				<view class="bomcenterbtn">
					<view class="">
						<view class="">
							<!-- {{$t('pp4')}} -->
							{{$t('ll2')}}
						</view>
						<view class="">{{account.releaseRate?floatNum(account.releaseRate,8,100):'0'}}%
						</view>
					</view>
					<view class="">
						<view class="">
							<!-- {{$t('pp5')}} -->

							{{$t('ll3')}}
						</view>
						<view class="">
							{{account.profitTotal?Number(retainFourDecimals(account.profitTotal)):'0'}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{$t('ll4')}}
						</view>
						<view class="">
							{{account.profit?Number(retainFourDecimals(account.profit)):'0'}}
						</view>
					</view>
				</view>
			</view>
			<view class="prowerBox_rule">
				<view class="rule_title">
					<text class="langrule"></text>
					<text>{{$t('pp7')}}</text>
				</view>
				<view class="rule_item">
					<view>
						<text>
							{{$t('ll5')}}
						</text>
					</view>
					<view>
						<text>
							{{$t('ll6')}}
						</text>
					</view>
					<view>
						<text>
							{{$t('ll7')}}
						</text>
					</view>
				</view>
				<view class="rule_bom">

				</view>
			</view>
			<view class="prowerBox_item">
				<view class="itme_img">
					{{$t('pp11')}}
				</view>
				<view class="item_list">
					<view v-for="(item,index) in pList" :key="item" class="d_f_between">
						<text>{{item.createTime}}</text>
						<text> {{Number(retainFourDecimals(item.pledgeNum))}} JUMP</text>
					</view>
					<view class="" v-if="pList.length<=0" style="text-align: center;">
						{{$t('pp12')}}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="typeprower" @close="typeprower = false" mode="center" :round="20">
			<!-- 弹框内容 -->
			<view class="popup-content">
				<view class="poptxt">
					{{$t('pp13')}}
				</view>
				<input type="number" :placeholder="$t('pp14')" v-model="pnum" />
				<view class="poptxt">
					{{$t('pp15')}}
				</view>
				<input type="password" :placeholder="$t('pp16')" v-model="ppassword" />
				<view class="d_f_between tips">
					<view class="">
						{{$t('pp17')}}: {{pconfigicon.pledgeWithdrawNum?Number(pconfigicon.pledgeWithdrawNum):'0'}}
					</view>
					<view class="">
						{{$t('pp18')}}: {{pconfigicon.withdrawFree?Number(pconfigicon.withdrawFree):'0'}}
					</view>
				</view>
				<button @click="fnmemberPledge">{{$t('pp19')}}</button>
			</view>
		</u-popup>

		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$t('pp20')" :confirmText="$t('pp21')" :content="messageText"
				:duration="2000" @confirm="confirm" @close="close"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		memberPledgeOrder, //获取当前质押信息
		memberPledge, //质押
		memberPledgeLog, //质押日志
		login,
		pconfig, //配置信息
		pledgeWithdraw //质押提现
	} from '@/api/home.js'
	export default {
		data() {
			return {
				account: '',
				typeprower: false, //质押弹窗
				pnum: '',
				ppassword: '',
				pList: [], //质押记录
				messageText: '', //未绑定提示
				pconfigicon: '', //配置信息
			}
		},
		onShow() {
			console.log('show')
			this.fnmemberPledgeOrdert() // 获取当前质押信息
			this.fnmemberPledgeLog() //质押日志
			this.fnpconfig() //配置信息
			this.setTitle() //动态修改头部和tabBar
		},
		mounted() {},
		methods: {
			setTitle() {
				uni.setTabBarItem({
					// 修改底部导航
					index: 0,
					text: this.$t('rp1'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 1,
					text: this.$t('rp2'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 2,
					text: this.$t('rp3'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 3,
					text: this.$t('rp4'),
				});
			},
			fndynamicLeft(titem, pages) {
				this.fnLogin().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.topower()
					} else if (res.code == 500) {
						console.log(res.msg)
						this.messageText = res.msg
						this.$refs.message.open()
					}
				})
			},
			// 关闭弹框
			close() {
				this.$refs.message.close()
			},
			// 确认
			confirm() {
				this.$refs.message.close()
				uni.navigateTo({
					url: '/pages/password/password'
				})
			},
			// 获取绑定状态
			fnLogin() {
				let param = {
					address: this.$store.state.devAddress
				}
				return login(param)
			},
			// 获取当前质押信息
			fnmemberPledgeOrdert() {
				var params = {
					address: this.$store.state.devAddress
				}
				memberPledgeOrder(params).then(res => {
					if (res.code == 200) {
						this.account = res.data
					}
				})
			},
			// 配置信息
			fnpconfig() {
				pconfig().then(res => {
					if (res.code == 200) {
						this.pconfigicon = res.data
					}
				})
			},
			//质押日志
			fnmemberPledgeLog() {

				var params = {
					address: this.$store.state.devAddress,
					type: '', //类型 1usdt 2拆分账户 3 动态账户 4 jump账户 传空 反所有
					page: 1,
					pageSize: 1000,
				}
				memberPledgeLog(params).then(res => {
					if (res.code == 200) {
						this.pList = res.data
					}
				})
			},
			// 质押显示
			topower() {
				this.typeprower = true;
			},
			// 提现
			fnmemberPledge() {
				if (!this.pnum) {
					uni.showToast({
						icon: 'error',
						title: this.$t('pp22'),
					})
					return;
				}
				if (!this.ppassword) {
					uni.showToast({
						icon: 'error',
						title: this.$t('pp23'),
					})
					return;
				}
				var params = {
					address: this.$store.state.devAddress,
					password: this.ppassword,
					amount: this.pnum,
				}
				pledgeWithdraw(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: this.$t("aw11"),
						})
						this.typeprower = false;
						this.ppassword = '';
						this.pnum = '';
						this.fnmemberPledgeOrdert() // 获取当前质押信息
						this.fnmemberPledgeLog() //质押日志
						this.fnpconfig() //配置信息

					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg,
						})
					}

				})
			},
			// 乘100
			floatNum(f, d, n) {
				let m = Math.pow(10, d);
				let num = (Math.round(f * m) * n) / m;
				return num;
			},
			retainFourDecimals(num) {
				return Math.floor(num * 10000) / 10000;
			}
		}
	}
</script>

<style scoped lang="scss">
	.prower {
		.prowerBox {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			&_top {
				width: 100%;
				background: linear-gradient(137deg, #9f7bff75 0%, #00000000 100%);
				backdrop-filter: blur(8rpx);
				position: relative;
				padding: 30rpx 70rpx;
				box-sizing: border-box;
				margin: 0 auto 30rpx;
				text-align: center;
				border-radius: 40rpx 0;
				color: #ffffff;
				font-size: 28px;
				font-weight: 500;


				&::before {
					display: block;
					content: "";
					border-radius: 40rpx 0;
					border: 1rpx solid transparent;
					background: linear-gradient(190deg, #aec9e9, transparent 100%) border-box;
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					-webkit-mask-composite: xor;
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}


				.langbox {
					width: 90%;
					height: 2rpx;
					backdrop-filter: blur(8px);
					background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%) border-box;
					text-align: center;
					margin: 14rpx auto;
				}

				.porfzy {
					min-width: 142rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					height: 56rpx;
					border-radius: 28rpx 0 0 28rpx;
					opacity: 1;
					border: 2rpx solid rgba(113, 1, 126, 0.52);
					background: rgba(113, 1, 126, 0.52);
					color: #ffffff;
					font-size: 30rpx;
					font-weight: 400;
					font-family: "苹方";
					line-height: 56rpx;
					text-align: center;
					position: absolute;
					right: 0;
					top: 42rpx;
				}

				.bomtop {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 500;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 16rpx;
					}
				}

				.bomcenter {
					font-size: 50rpx;
					font-weight: 700;
					color: #ffffff;
					font-family: "阿里巴巴普惠体";
					margin-top: 30rpx;
					// background-image: linear-gradient(to right, #E474FF, #F1B8FF);
					// background-clip: text;
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
				}

				.bomcenterbtn {
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 24rpx;

					view {
						line-height: 54rpx;
						font-size: 28rpx;
					}
				}
			}

			&_rule {
				padding: 10rpx 20rpx;
				box-sizing: border-box;

				.rule_title {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					color: rgb(214, 167, 249);
					font-size: 30rpx;
					font-weight: 500;
					font-family: "苹方";
					margin-bottom: 20rpx;

					.langrule {
						width: 4rpx;
						height: 30rpx;
						opacity: 1;
						border: 2rpx solid rgb(214, 167, 249);
						background: linear-gradient(-16.5deg, rgb(241, 184, 255) 0%, rgb(228, 116, 255) 100%);
						margin-right: 10rpx;
					}
				}

				.rule_item {
					color: rgb(182, 182, 182);
					font-size: 28rpx;
					font-family: "苹方";

					text {
						line-height: 50rpx;
					}
				}

				.rule_bom {
					width: 100%;
					height: 2rpx;
					backdrop-filter: blur(8px);
					background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%) border-box;
					text-align: center;
					margin: 38rpx auto 80rpx;
				}
			}



			&_item {
				.itme_img {
					// width: 280rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: url("@/static/img/j_zhiya.png") no-repeat;
					background-size: contain;
					color: #eccdff;
					font-size: 40rpx;
					text-align: left;
					box-sizing: border-box;
					padding-left: 40rpx;
				}

				.item_list {
					view {
						width: 100%;
						border-radius: 24rpx;
						opacity: 1;
						background: rgba(42, 0, 123, 0.33);
						box-shadow: inset 0 2rpx 6rpx 0 rgba(69, 69, 69, 0.54), inset 0 0 16rpx 0 rgba(255, 255, 255, 0.23), 4rpx 4rpx 20rpx 0 rgba(0, 0, 0, 0.22);
						margin-top: 35rpx;
						padding: 16rpx 30rpx;
						box-sizing: border-box;
						color: rgb(214, 167, 249);
						font-size: 24rpx;
					}
				}

				.itme_top {
					width: 300rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: left;
					position: relative;
					color: rgba(236, 205, 255, 1);
					font-size: 40rpx;
					padding-left: 30rpx;
					box-sizing: border-box;

					&::after {
						content: "";
						display: inline-block;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 60rpx;
						height: 60rpx;
						background: linear-gradient(137deg, rgba(230, 117, 255, 1) 0%, rgba(214, 167, 249, 1) 100%);
						backdrop-filter: blur(8rpx);
						z-index: 99;
						border-radius: 20rpx;
					}

					&::before {
						content: "";
						display: inline-block;
						position: absolute;
						left: 20rpx;
						top: 0;
						width: 250rpx;
						height: 68rpx;
						background-color: rgba(9, 8, 10, .5);
						z-index: 999;
						border: 2rpx solid rgba(179, 179, 180, 1);
						border-radius: 20rpx;
					}

				}
			}
		}
	}

	.popup-content {
		padding: 20px;
		text-align: left;
		color: #000000;
		font-size: 34rpx;
		line-height: 80rpx;

		input {
			margin-bottom: 10px;
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}

		button {
			background: url("@/static/img/w.png") no-repeat;
			background-size: cover;
			width: 572rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			color: #ffffff;
			font-size: 42rpx;
			font-weight: 500;
			margin: 40rpx auto 0;

		}

		.tips {
			font-size: 28rpx
		}
	}
</style>